<!-- 我的订单-订单详情 -->
<template>
	<view v-if="detailInfo.id" class="order-detail page-background">
		<view class="status-area">
			<view class="status">
				{{detailInfo.statusName||''}}
			</view>
			<view class="tips">
				{{matchStatusTips}}
			</view>
			<!-- <view class="appoint-numbers">
				<text class="ready-number">{{3}}</text><text class="center-line">/</text>{{20}}
			</view> -->
		</view>
		<view v-if="detailInfo.type!='3'" class="ball_item item-box">
			<view class="player-item">
				<view class="left">
					<image v-if="detailInfo.playerIcon" class="icon" :src="detailInfo.playerIcon" mode=""></image>
          <template v-else>
            <image v-if="detailInfo.sex==2" class="icon" :src="'@/static/images/mine/player-icon-gril-grey.png'|addBaseImgUrl" mode="">
            </image>
            <image v-else class="icon" :src="'@/static/images/mine/player-icon-boy-grey.png'|addBaseImgUrl" mode=""></image>
          </template>
					<image v-if="detailInfo.sex=='1'" class="icon-sex" :src="'@/static/images/mine/icon-sex-boy.png'|addBaseImgUrl" mode=""></image>
					<image v-else class="icon-sex" :src="'@/static/images/mine/icon-sex-gril.png'|addBaseImgUrl" mode=""></image>
				</view>
					<view class="right">
						<view class="title-row flex-box">
							<text class="player-name">{{detailInfo.relName}}</text>
							<view class="lit-tag icon_y">
								{{detailInfo.relationType}}
							</view>
							<view  :class="detailInfo.sex=='1'?'lit-tag icon_m':'lit-tag icon_w'">
								级别L{{detailInfo.skillLevel}}
							</view>
						</view>
						<view class="content-row">
							手机：{{detailInfo.emergencyContact||''}}
						</view>
						<view class="content-row">
							出生日期：{{detailInfo.birthday}}
						</view>
					</view>
			</view>
			<view class="levelTip">
				<view class="levelTip_left">
					将以俱乐部定义的级别，作为您的报名级别，如有问题请联系俱乐部
				</view>
				<view :class="detailInfo.sex=='1'? 'levelTip_right_b':'levelTip_right_r'">
					<view :class="detailInfo.sex=='1'? 'level_m':'level_w'">
					</view>
					<view class="level_txt">
						级别L{{detailInfo.playerSkillLevel}}
					</view>
				</view>
			</view>
		</view>
		<view class="course-item item-box">
			<view @click="to('/mainProcess/club/detail/detail?id='+detailInfo.clubId)" class="top-row flex-box">
				<view class="left flex-box">
					<view class="jlbicon"></view>
					<view class="club-name">
						{{detailInfo.clubName}}
					</view>
					<van-icon name="arrow" size="15px" color="#CCCCCC" />
				</view>
			</view>
			<view @click="toDetail" class="course-info flex-box">
				<view class="left circle" v-if="detailInfo.type=='2'">
					<image v-if="detailInfo.coachIcon" :src="detailInfo.coachIcon" mode="aspectFill"></image>
					<image v-else :src="'@/static/images/image-default.png'|addBaseImgUrl" />
				</view>
				<view class="left" v-else>
					<image :src="'@/static/images/vip.png'|addBaseImgUrl" v-if="detailInfo.type=='3'"/>
					<image v-else :src="detailInfo.goodsUrl" mode="aspectFill"></image>
					<view class="small" v-if="detailInfo.actType=='2'">
						<view>赛事</view>
					</view>
				</view>
				<view class="right">
					<view class="title-price flex-box">
						<view class="course-title line-clamp-2">
							{{detailInfo.goodsName}}
						</view>
						<view class="course-price">
							￥<text>{{detailInfo.cost|floorTwo}}</text>
						</view>
					</view>
					<view v-if="detailInfo.spActEnter && detailInfo.spActEnter.placeName" class="venue">
						{{detailInfo.spActEnter.placeName}}
					</view> 
					<view v-if="detailInfo.spClassEnter && detailInfo.spClassEnter.placeName" class="venue">
						{{detailInfo.spClassEnter.placeName}}
					</view>
					<view class="huismall" v-if="detailInfo.type=='1'">{{datetit(detailInfo.actStartDate)}} {{week=="1"?'周一':week=="2"?'周二':week=="3"?'周三':week=="4"?'周四':week=="5"?'周五':week=="6"?'周六':week=="0"?'周日':''}}  {{detailInfo.actStartTime.slice(0,5)+'-'+detailInfo.actEndTime.slice(0,5)}}</view>
					<view class="jibie" v-if="detailInfo.type=='1'">
						<view class="man">{{'男L'+detailInfo.spActEnter.actLevelStart+'-L'+detailInfo.spActEnter.actLevelEnd}}</view>
						<view class="woman">{{'女L'+detailInfo.spActEnter.actGirlLevelStart+'-L'+detailInfo.spActEnter.actGirlLevelEnd}}</view>
					</view>
					<view class="tags flex-box">
						<view v-if="detailInfo.type!='1'&&detailInfo.type!='3'" class="lit-tag">
							{{detailInfo.goodsSpec}}
						</view>
						<view class="langClass flex-box" v-if="detailInfo.classType!=='2'&& detailInfo.type=='2'">
							<block v-if="detailInfo.couponClassCount">
								<!-- <view class="icon-coupon">
									
								</view> -->
								<image class="icon-coupon" src="@/static/images/icon_dui.png" mode=""></image>
								<view class="">
									{{detailInfo.couponClassCount}}课时
								</view>
								<view class="" v-if="detailInfo.couponClassDays">
									有效期{{detailInfo.couponClassDays}}天
								</view>
							</block>
							<block v-else>
								<view class="" v-if="detailInfo.spClassEnter.hourType == '0'">
									{{detailInfo.totalCount}}课时
								</view>
								<view class="" v-if="detailInfo.spClassEnter.hourType== '1'">
									不限课时
								</view>
								<view class="" v-if="detailInfo.classDays&&detailInfo.classDays>0">
									有效期{{detailInfo.classDays}}天
								</view>
							</block>
						</view>
						<!-- <view v-if="detailInfo.spActEnter&&detailInfo.spActEnter.actLevelStart&&detailInfo.spActEnter.actLevelEnd" class="lit-tag">
							{{'L'+detailInfo.spActEnter.actLevelStart+'-L'+detailInfo.spActEnter.actLevelEnd}}
						</view> -->
					</view>
				</view>
			</view>
			<view v-if="detailInfo.refundFlag||isRefundDetailShow" class="btn-row">
				<block v-if="detailInfo.type==1">
					<view v-if="detailInfo.refundFlag" @click="toRefund" class="btn btn-sure">
						取消报名
					</view>
					<view v-if="isRefundDetailShow" @click="toRefundDetail" class="btn btn-sure">
						退款/售后
					</view>
				</block>
				<block v-else>
					<view v-if="detailInfo.refundFlag" @click="toRefund" class="btn btn-sure">
						退款/售后
					</view>
					<view v-if="isRefundDetailShow" @click="toRefundDetail" class="btn btn-sure">
						退款/售后
					</view>
				</block>
			</view>
			<view v-else class="btn-row">
				<view @click="refundDialog" class="btn btn-cancel">
					退款/售后
				</view>
			</view>
			<view class="order-price-info">
				<view v-if="detailInfo.deductionCoupon||detailInfo.deductionPoint" class="info-row flex-box">
					<view class="row-label">
						订单总价
					</view>
					<view class="row-right">
						￥<text>{{detailInfo.cost|floorTwo}}</text>
					</view>
				</view>
				<!-- <view v-if="true" class="info-row flex-box">
					<view class="row-label">
						保险金额
					</view>
					<view class="row-right">
						￥<text>10.00</text>
					</view>
				</view> -->
				<view v-if="detailInfo.deductionCoupon" class="info-row flex-box">
					<view class="row-label">
						优惠券抵扣
					</view>
					<view class="red row-right">
						-￥<text>{{detailInfo.deductionCoupon|floorTwo}}</text>
					</view>
				</view>
				<view v-if="detailInfo.deductionPoint" class="info-row flex-box">
					<view class="row-label">
						积分抵扣
					</view>
					<view class="red row-right">
						-￥<text>{{detailInfo.deductionPoint|floorTwo}}</text>
					</view>
				</view>
				<view class="need-pay-price">
					应付金额：<text>￥<text class="price">{{detailInfo.amount|floorTwo}}</text></text>
				</view>
			</view>
		</view>
		<view class="order-info item-box">
			<view class="info-row  break_all" v-if="detailInfo.remark">
				备注：{{detailInfo.remark}}
			</view>
			<view class="info-row">
				订单号：{{detailInfo.code}}
			</view>
			<view v-if="detailInfo.payTypeValue" class="info-row">
				支付方式：{{detailInfo.payTypeValue+'支付'}}
			</view>
			<view class="info-row" v-for="(item, index) in detailInfo.orderRecordsList" :key="index">
				{{item.operate}}：{{item.createDate}}
			</view>
		</view>
		<view v-if="detailInfo.status=='0'||isAppointShow||isEvaluateShow||isEvaluateDetailShow" class="fixed-bottom">
			<view class="bottom-container">
				<view @click="toCancel" v-if="detailInfo.status=='0'" class="btn btn-cancel">
					取消订单
				</view>
				<view @click="toPay" v-if="detailInfo.status=='0'" class="btn btn-sure">
					立即付款
				</view>
				<view @click="toAppoint" v-if="isAppointShow" class="btn btn-sure">
					约课
				</view>
				<view @click="toEvaluate" v-if="isEvaluateShow" class="btn btn-sure">
					评价
				</view>
				<view @click="toEvaluateDetail" v-if="isEvaluateDetailShow" class="btn btn-cancel">
					评价详情
				</view>
			</view>
		</view>
		<!-- 弹出框 -->
		<van-dialog id="van-dialog" confirm-button-color="#2E87FF" cancel-button-color="#2E87FF" />
		<!-- 取消报名提示弹框 -->
		<van-dialog
			id="van-dialog2"
			:show="dialog2Show"
			use-slot
			confirm-button-color="#2D87FF"
			confirm-button-text="知道了"
			class="refuse-dialog"
			@confirm="dialogConfirm"
			>
			<view class="refuse-dialog-wrap">
				<van-icon @click="dialog2Show=false"
				          name="cross"
				          color="#ccc"
				          size="30rpx"
				          custom-style="position:absolute;top:15px;right:15px;" />
				<view class="title">
					当前订单不能取消报名哦！
				</view>
				<view class="title-line"></view>
				<view class="dialog-slot">
					<text class="dialog-slot-title">
						各订单状态下不能取消报名或退款的原因如下：
					</text>
					<view class="dialog-slot-content">
						<view class="slot-label">
							待付款
						</view>
						<view class="slot-text">
							订单支付后，才视为课程/活动报名成功。若您未按时支付，则系统将在规定时间内关闭您的订单。
						</view>
						<view class="slot-label">
							已完成
						</view>
						<view class="slot-text">
							已完成的订单暂不支持线上取消报名或退款，如有需求请与俱乐部协商。
						</view>
						<view class="slot-label">
							已取消
						</view>
						<view class="slot-text">
							用户下单后，未在系统规定时间内完成支付、活动被俱乐部取消或活动未成团等情况，系统将会关闭订单。订单关闭后，系统将自动为已在线上缴费的用户办理退款。
						</view>
						<view class="slot-label">
							已报名/已支付
						</view>
						<view class="slot-text">
							已超过活动可取消报名时间时，暂不支持线上取消报名或退款，如有需求请与俱乐部协商。
						</view>
					</view>
				</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	import Dialog from '@/wxcomponents/vant/dist/dialog/dialog';
	import { rili } from '@/common/js/util.js'
	export default {
		data() {
			return {
				id: '',
				detailInfo: {},
				week:"",
				dialog2Show: false
			};
		},
		onLoad(data) {
			this.id = data.id || ''
			
		},
		onShow(){
			this.init()
		},
		computed: {
			...mapState(['userInfo', 'accessToken']),
			matchStatusTips() {
				switch (this.detailInfo.status) {
					case '0':
						return '请速去付款吧~'
					case '1':
						return '订单已删除~'
					case '2':
						let a = this.detailInfo
						if(a.status==2&&['0','1'].includes(a.classType)&&a.spClassEnter&&a.spClassEnter.totalCount>a.spClassEnter.useCount){
							return '请速去约课吧~'
						}else{
							return ''
						}
					case '3':
						return '订单已取消~'
					case '4':
						return '请耐心等待哟～'
					case '6':
						if (this.detailInfo.isPraised == '0'&&this.detailInfo.type==2) {
							return '请速去评价吧~'
						} else {
							return ''
						}
					case '7':
						return '请耐心等待哟～'
					default:
						return ''
				}
			},
			isRefundShow() {
				if (this.detailInfo.status == '2' && ((this.detailInfo.type == '1' && this.detailInfo.actState == '0') || (this.detailInfo
						.type == '2' && this.detailInfo.classType == '2' && this.detailInfo.classState == '0') || (this.detailInfo.type ==
						'2' && this.detailInfo.classType != '2'))) {
					return true
				} else {
					return false
				}
			},
			isRefundDetailShow() {
				let a = this.detailInfo
				if(this.detailInfo.type=='3'){ // 打球卡订单
					return false
				}
				if ((a.status == '3' && a.isRefund == '1') || a.status == '4' || (a.status == '6' && a.isRefund == '1') || a.status ==
					'7') {
					return true
				} else {
					return false
				}
			},
			isAppointShow(){
				let a = this.detailInfo
				if(a.status==2&&['0','1'].includes(a.classType)&&(a.classState==1||a.classState==0)&&a.spClassEnter&&a.spClassEnter.totalCount>a.spClassEnter.useCount){
					return true
				}else{
					return false
				}
			},
			isEvaluateShow(){
				let a = this.detailInfo
				if(a.status=='6'&&a.isRefund=='0'&&a.isPraised=='0'&&a.type=='2'){
					return true
				}else{
					return false
				}
			},
			isEvaluateDetailShow(){
				let a = this.detailInfo
				if(a.status=='6'&&a.isRefund=='0'&&a.isPraised=='1'&&a.type=='2'){
					return true
				}else{
					return false
				}
			}
		},
		methods: {
			dialogConfirm(){
				this.dialog2Show = false
			},
			datetit(a){
				let date = a.split("-");
				return `${date[1]}月${date[2]}日`
			},
			async init() {
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				const res = await this.$api.getOrderDetail(param, this.id)
				if (res && res.code == 200) {
					this.detailInfo = res.data
					this.week=rili.getweekDay(res.data.actStartDate)
				}
			},
			toRefund() {
				uni.navigateTo({
					url: `/personalCenter/myOrder/refund/refund?id=${this.id}`
				})
			},
			refundDialog() {
				this.dialog2Show = true
			},
			toRefundDetail() {
				uni.navigateTo({
					url: `/personalCenter/myOrder/refundDetail/refundDetail?id=${this.id}`
				})
			},
			toEvaluate(){
				let a = this.detailInfo
				if(a.classType==2){
					uni.navigateTo({
						url: `/mainProcess/evaluate/index/index?orderId=${this.detailInfo.id}&state=2&type=1`
					})
				}else{
					uni.navigateTo({
						url: `/mainProcess/evaluate/index/index?type=2&state=2&orderId=${a.id}`
					})
				}
			},
			toEvaluateDetail(){
				uni.navigateTo({
					url: `/mainProcess/evaluate/index/index?orderId=${this.detailInfo.id}&state=1&type=${this.detailInfo.classType==2?'1':'2'}`
				})
			},
			toCancel() {
				Dialog.confirm({
					title: '确认取消此订单？',
					cancelButtonText: '取消',
					width: '325px',
					messageAlign: 'left',
					customStyle: 'border-radius:7.5px;',
					className: 'my-dialog-confirm'
				})
				.then(() => {
					// on confirm
					this.makeSureCancel()
				})
				.catch(() => {
					// on cancel
								
				})
			},
			async makeSureCancel(){
				const param = {
					'ACCESS-TOKEN': this.accessToken
				}
				const res = await this.$api.cancelOrder(param, this.id)
				if(res && res.code == 200){
					let timer = setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},2000)
				}
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			},
			async toPay() {
				uni.navigateTo({
				    url:'/mainProcess/confirmOrder/payType?id='+this.id
				})
			},
			toDetail() {
				let obj = this.detailInfo
				let url = ''
				if(obj.type=='2'){
					url = '/course/detail/detail?id=' + obj.classId
				}else if(obj.type=='1'){
					url = '/activity/detail/detail?id=' + obj.actId
				}else{
					return false
				}
				uni.navigateTo({
					url: url
				})
			},
			toAppoint() {
				if(this.detailInfo.spClassEnter.classId&&this.detailInfo.spClassEnter.id){
					// uni.navigateTo({
					// 	url: `/personalCenter/myCourse/appoint/appoint?id=${this.detailInfo.spClassEnter.id}&classId=${this.detailInfo.spClassEnter.classId}`
					// })
					uni.navigateTo({
						url: `/personalCenter/myCourse/detail/detail?id=${this.detailInfo.classId}&orderId=${this.detailInfo.id}`
					})
				}
			},
			to(url){
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-detail {
		min-height: 100vh;
		padding-bottom: 130rpx;

		.status-area {
			position: relative;
			height: 130rpx;
			background-color: $public-color-blue1;
			padding: 20rpx;

			.status {
				color: white;
				font-size: 36rpx;
			}

			.tips {
				font-size: 26rpx;
				color: #8CBCFC;
			}

			.appoint-numbers {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				color: white;
				font-size: 24rpx;

				.ready-number {
					font-size: 60rpx;
				}

				.center-line {
					margin: 0 10rpx;
				}
			}
		}
		.ball_item{
			overflow: hidden;
		}
		.player-item {
			padding: 30rpx 20rpx;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			.left {
				width: 110rpx;
				height: 110rpx;
				position: relative;
				margin-right: 20rpx;
				border-radius: 50%;
				background-color: #F2F2F2;
				.icon {
					width: 100%;
					height: 100%;
					vertical-align: middle;
					border-radius: 50%;
				}

				.icon-sex {
					position: absolute;
					right: 0;
					top: 0;
					width: 30rpx;
					height: 30rpx;
				}
			}

			.right {
				.title-row {
					justify-content: flex-start;
					align-items: center;

					.player-name {
						font-size: 34rpx;
						margin-right: 10rpx;
					}
				}
				.icon_y{
					background-color: transparent;
					color: #FDB42E;
					border:1px solid #FFE1A2;
				}
				.icon_m{
					background-color:transparent!important;
					border:1px solid #C8DBFF;
					color:#2E87FF!important;
				}
				.icon_w{
					background-color:transparent!important;
					border:1px solid #FFC8C3;
					color:#E14806;
				}

				.content-row {
					font-size: 26rpx;
					color: $text-color-grey;
					margin-top: 5rpx;
				}
			}
		}
		.levelTip{
			background: #EEF5FE;
			display: flex;
			justify-content: space-between;
			padding: 6rpx 21rpx;
			align-items: center;
			.levelTip_left{
				width: 70%;
				font-size: 22rpx;
				color: #999999;
			}
			.levelTip_right_r{
				border: 2rpx solid #FFC8C3;
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				padding:0rpx 7rpx;
				.level_txt{
					font-size: 22rpx;
					color: #E14806;
				}
			}
			.levelTip_right_b{
				border: 2rpx solid #C8DBFF;
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				padding:0rpx 7rpx;
				.level_txt{
					font-size: 22rpx;
					color: #2E87FF;
				}
			}
		}
		.course-item {
			min-height: 280rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.top-row {
				height: 30rpx;

				.left {
					.club-name {
						font-size: 30rpx;
						line-height: 30rpx;
						margin-right: 10rpx;
					}
					.jlbicon{
						width:32rpx;
						height: 32rpx;
						background:url('@/static/images/icon-vipcard-club.png') no-repeat;
						background-size:100% 100%;
						margin-right:12rpx;
					}
				}

				.right {
					color: #FDB42E;
					font-size: 26rpx;
					line-height: 30rpx;
				}
			}

			.course-info {
				min-height: 140rpx;
				margin-top: 30rpx;
				align-items: stretch;
				.left {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					flex: 0 0 auto;
					background-color: #F2F2F2;
					border-radius: 15rpx;
					overflow: hidden;
					position: relative;
					image {
						width: 100%;
						height: 100%;
						vertical-align: middle;
						border-radius: 15rpx;
					}
					.small{
						position: absolute;
						left: 0;
						top:0;
						width: 68rpx;
						text-align: center;
						view{
							padding: 0 10rpx;
							background-color: #FDE3DC;
							color: #F77350;
							height: 32rpx;
							line-height: 29rpx;
							border-radius: 5rpx;
							color:#F77350;
							font-size: 24rpx;
						}
					}
				}
				.circle{
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
				}
				.right {
					flex: 1 0 auto;
					display: flex;
					flex-flow: column;
					.title-price {
						align-items: flex-start;
						.course-title {
							line-height: 38rpx;
							max-width: 340rpx;
						}
						.course-price {
							font-size: 24rpx;
							line-height: 38rpx;

							text {
								font-size: 30rpx;
							}
						}
					}
					.huismall{
						font-size: 24rpx;
						margin-bottom: 10rpx;
						color: #999999;
					}
					.jibie{
						width: 100%;
						display: flex;
						margin-bottom:10rpx;
						.man{
							background-color:transparent!important;
							border:1px solid #C8DBFF;
							color:#2E87FF!important;
							line-height: 29rpx;
							margin-right: 10rpx;
							font-size: 24rpx;
							border-radius: 3px;
							padding: 5rpx 8rpx;
						}
						.woman{
							background-color:transparent!important;
							border:1px solid #FFC8C3;
							color:#E14806;
							line-height: 29rpx;
							font-size: 24rpx;
							border-radius: 3px;
							padding: 5rpx 8rpx;
						}
					}
					.venue {
						font-size: 24rpx;
						color: $text-color-grey;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						max-width: 300rpx;
					}

					.tags {
						justify-content: space-between;
						margin-top: 10rpx;
						.langClass{
							display: flex;
							align-items: center;
							.icon-coupon{
								width: 46rpx;
								height: 31rpx;
								margin-right: 10rpx;
							}
							view{
								color: #FDB42E;
								font-size: 26rpx;
							}
							view:last-child{
								margin-left: 15rpx;
							}
						}
					}
				}
			}

			.btn-row {
				display: flex;
				justify-content: flex-end;
				margin-bottom: 39rpx;
				.btn {
					width: 151rpx;
					padding: 5rpx;
					border-radius: 5px;
					text-align: center;
					margin-left: 20rpx;
					&.btn-sure {
						font-size: 24rpx;
						background: #6BA9FE;
						color: #FFFFFF;
					}
					&.btn-cancel {
						font-size: 24rpx;
						background: #BABABA;
						color: #FFFFFF;
					}
				}
			}

			.order-price-info {
				margin-top: 25rpx;
				.info-row {
					height: 60rpx;
					align-items: center;

					.row-right {
						font-size: 24rpx;

						text {
							font-size: 30rpx;
						}
					}

					.red {
						color: #FF0000;
					}
				}
				
				.need-pay-price {
					text-align: right;
					font-size: 24rpx;
					margin-top: 30rpx;
					text {
						color: $public-color-yellow1;

						.price {
							font-size: 36rpx;
						}
					}
				}
			}
		}

		.order-info {
			padding: 10rpx 20rpx;

			view {
				line-height: 60rpx;
			}
			.break_all{
				word-break: break-all;
			}
		}

		.fixed-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: white;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.bottom-container{
				height: 108rpx;
				padding: 10rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				width: 100%;
				.btn {
					width: 243rpx;
					height: 78rpx;
					border-radius: 39rpx;
					line-height: 74rpx;
					text-align: center;
					font-size: 32rpx;
					margin-left: 20rpx;
				
					&.btn-sure {
						color: $public-color-blue1;
						border: 2rpx solid $public-color-blue1;
					}
				
					&.btn-cancel {
						color: $text-color-grey;
						border: 2rpx solid #E9E9E9;
					}
				}
			}
		}
	}
	
	.refuse-dialog{
		border-radius: 15rpx;
		.refuse-dialog-wrap{
			position: relative;
			.title{
				width: 100%;
				text-align: center;
				display: inline-block;
				padding: 45rpx 45rpx 30rpx;
				font-size: 32rpx;
				color: #333;
			}
			.title-line{
				width: 590rpx;
				margin: 0 auto;
				height: 1rpx;
				background-color: #EBEBEA;
			}
			.dialog-slot{
				padding: 25rpx 40rpx 10rpx;
				.dialog-slot-title{
					font-size: 26rpx;
					color: #999;
					margin-bottom: 20rpx;
				}
				.dialog-slot-content{
					font-size: 28rpx;
					view{
						font-size: 28rpx;
					}
					.slot-text{
						color: #999;
						padding-bottom: 20rpx;
						text-align: justify;
						line-height: 42rpx;
					}
				}
			}
		}
	}
</style>
